<template>
  <view class="model-params-config">
    <view class="header-row">
      <view class="model-indicator">
        <text class="indicator-label">当前模型:</text>
        <text class="indicator-value">{{ modelTypeLabel }}</text>
      </view>
      
      <button 
        class="save-btn" 
        :class="{ disabled: !hasChanges }"
        :disabled="!hasChanges"
        @click="saveParams"
      >
        <text class="save-icon">💾</text>
        <text class="save-text">{{ hasChanges ? '保存参数' : '无修改' }}</text>
      </button>
    </view>

    <!-- 模型流向指示器（仅多模型显示） -->
    <view class="model-flow-indicator" v-if="isMultiModel">
      <view 
        v-for="(model, index) in modelList" 
        :key="model.name"
        class="flow-item"
        @click="switchModel(index)"
      >
        <view class="model-badge" :class="{ active: activeModelIndex === index }">
          <text class="model-icon">{{ getModelIcon(model.type) }}</text>
          <text class="model-name">{{ model.name }}</text>
          <text class="model-type-label">{{ getModelTypeLabel(model.type) }}</text>
        </view>
        <view class="flow-arrow" v-if="index < modelList.length - 1">
          <text class="arrow-line">━━▶</text>
          <text class="flow-note" v-if="modelChainFlow && modelChainFlow[index]">
            {{ modelChainFlow[index].note }}
          </text>
        </view>
      </view>
    </view>

    <!-- 参数分类 Tab -->
    <view class="params-tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.key"
        class="tab-item"
        :class="{ active: activeTab === tab.key }"
        @click="activeTab = tab.key"
      >
        <text class="tab-label">{{ tab.label }}</text>
        <text class="tab-count">({{ tab.count }})</text>
      </view>
    </view>

    <!-- 初始状态 -->
    <view class="params-section" v-if="activeTab === 'initial' && displayParams">
      <view class="params-grid">
        <view 
          v-for="(value, key) in displayParams.initialState" 
          :key="key"
          class="param-item"
        >
          <view class="param-header-row">
            <text class="param-key">{{ key }}</text>
            <text class="param-full-desc">{{ getParamFullDesc(key, 'initial') }}</text>
          </view>
          <input 
            class="param-input"
            type="number" 
            step="0.001"
            :value="displayParams.initialState[key]"
            @input="handleParamInput($event, key, 'initialState')"
          />
        </view>
      </view>
    </view>

    <!-- 模型参数 -->
    <view class="params-section" v-if="activeTab === 'params' && displayParams">
      <view class="params-grid">
        <view 
          v-for="(value, key) in modelParameters" 
          :key="key"
          class="param-item"
        >
          <view class="param-header-row">
            <text class="param-key">{{ key }}</text>
            <text class="param-full-desc">{{ getParamFullDesc(key, 'params') }}</text>
          </view>
          <input 
            class="param-input"
            type="number" 
            step="0.001"
            :value="displayParams.parameters[key]"
            @input="handleParamInput($event, key, 'parameters')"
          />
        </view>
      </view>
    </view>

    <!-- 月蒸发量 -->
    <view class="params-section" v-if="activeTab === 'pet' && displayParams">
      <view class="pet-table" v-if="displayParams.parameters?.monthlyPET && displayParams.parameters.monthlyPET.length > 0">
        <view class="pet-header">
          <text class="pet-col pet-col-month">月份</text>
          <text class="pet-col pet-col-value">蒸发量(mm)</text>
        </view>
        <view 
          v-for="(item, index) in displayParams.parameters.monthlyPET" 
          :key="item.month"
          class="pet-row"
        >
          <text class="pet-col pet-col-month">
            {{ item.month }}月 {{ item.monthName || getMonthName(item.month) }}
          </text>
          <view class="pet-col pet-col-value">
            <input 
              class="pet-input"
              type="number" 
              step="0.1"
              :value="item.pet"
              @input="handlePETInput($event, index)"
            />
          </view>
        </view>
      </view>
      <view v-else class="pet-empty">
        <text class="empty-icon">📭</text>
        <text class="empty-text">暂无月蒸发量数据</text>
        <text class="empty-hint">请检查模型参数配置</text>
      </view>
      
      <!-- 批量操作 -->
      <view class="batch-operations">
        <text class="batch-label">批量操作:</text>
        <view class="batch-actions">
          <button class="batch-btn" @click="adjustAllPET(1.1)">整体+10%</button>
          <button class="batch-btn" @click="adjustAllPET(0.9)">整体-10%</button>
          <button class="batch-btn" @click="resetPET">恢复默认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { paramsMeta } from '../api/metadata.js'

export default {
  name: 'ModelParamsConfig',
  props: {
    modelType: {
      type: String,
      required: true,
      validator: (value) => ['大伙房', '新安江', 'SMS3-LAG3'].includes(value)
    },
    params: {
      type: Object,
      default: null
    }
  },
  emits: ['update:params', 'params-change'],
  setup(props, { emit }) {
    const localParams = ref(props.params ? JSON.parse(JSON.stringify(props.params)) : null)
    const originalParams = ref(props.params ? JSON.parse(JSON.stringify(props.params)) : null)
    const activeTab = ref('initial')
    const activeModelIndex = ref(0)  // 当前选中的模型索引
    const defaultPET = ref([])
    const hasChanges = ref(false)
    const isInternalUpdate = ref(false)  // 标记是否是内部修改

    // 判断是否为多模型
    const isMultiModel = computed(() => {
      return localParams.value?._rawModels && 
             localParams.value._rawModels.length > 1 &&
             localParams.value._modelChain?.type === 'composite'
    })

    // 获取模型列表
    const modelList = computed(() => {
      if (!isMultiModel.value) return []
      return localParams.value._rawModels || []
    })

    // 获取模型链的流向信息
    const modelChainFlow = computed(() => {
      return localParams.value._modelChain?.flow || []
    })

    // 当前激活的模型
    const currentModel = computed(() => {
      if (!isMultiModel.value) return null
      return modelList.value[activeModelIndex.value] || null
    })

    // 当前显示的参数（如果是多模型，显示当前选中模型的参数）
    const displayParams = computed(() => {
      if (!localParams.value) return null
      
      if (isMultiModel.value && currentModel.value) {
        // 多模型：显示当前选中模型的参数
        return {
          initialState: currentModel.value.initial_state || {},
          parameters: currentModel.value.parameters || {}
        }
      } else {
        // 单模型：显示合并后的参数
        return {
          initialState: localParams.value.initialState || {},
          parameters: localParams.value.parameters || {}
        }
      }
    })

    const modelTypeLabel = computed(() => {
      if (isMultiModel.value && currentModel.value) {
        return `${currentModel.value.name} - ${getModelTypeLabel(currentModel.value.type)}`
      }
      return props.modelType === '大伙房' ? '大伙房模型' : 
             props.modelType === '新安江' ? '新安江模型' : 
             props.modelType
    })

    // 获取模型类型标签
    const getModelTypeLabel = (type) => {
      const labels = {
        'production': '产流模型',
        'routing': '汇流模型',
        'integrated': '综合模型'
      }
      return labels[type] || type
    }

    // 获取模型图标
    const getModelIcon = (type) => {
      const icons = {
        'production': '💧',
        'routing': '🌊',
        'integrated': '⚡'
      }
      return icons[type] || '📊'
    }

    // 切换模型
    const switchModel = (index) => {
      activeModelIndex.value = index
      // 切换模型时重置到初始状态 tab
      activeTab.value = 'initial'
    }

    // 模型参数（排除monthlyPET）
    const modelParameters = computed(() => {
      if (!displayParams.value?.parameters) return {}
      const { monthlyPET, ...rest } = displayParams.value.parameters
      return rest
    })

    const tabs = computed(() => {
      if (!displayParams.value) return []
      
      const tabList = [
        {
          key: 'initial',
          label: '初始状态',
          count: Object.keys(displayParams.value.initialState || {}).length
        },
        {
          key: 'params',
          label: '模型参数',
          count: Object.keys(modelParameters.value).length
        }
      ]
      
      // 只在有 monthlyPET 时显示月蒸发量 tab
      if (displayParams.value.parameters?.monthlyPET && 
          Array.isArray(displayParams.value.parameters.monthlyPET) &&
          displayParams.value.parameters.monthlyPET.length > 0) {
        tabList.push({
          key: 'pet',
          label: '月蒸发量',
          count: localParams.value.parameters.monthlyPET.length
        })
      }
      
      return tabList
    })

    const getParamMeta = (key, type) => {
      // 优先使用API返回的元数据
      if (localParams.value?._meta?.[type]?.[key]) {
        return localParams.value._meta[type][key]
      }
      
      // 回退到本地mock元数据
      const meta = paramsMeta[props.modelType]?.[type]?.[key]
      return meta || {
        label: key,
        unit: '',
        desc: '参数说明',
        range: ''
      }
    }

    // 获取完整的参数描述（从para_schema）
    const getParamFullDesc = (key, type) => {
      // 优先使用API返回的原始描述
      if (localParams.value?._meta?.[type]?.[key]?.label) {
        return localParams.value._meta[type][key].label
      }
      
      // 回退到本地mock元数据
      const meta = paramsMeta[props.modelType]?.[type]?.[key]
      if (meta?.desc) {
        return meta.desc
      }
      
      return '参数说明'
    }

    const getMonthName = (month) => {
      const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      return names[month - 1] || ''
    }

    // 处理参数输入（支持多模型）
    const handleParamInput = (event, key, type) => {
      const value = parseFloat(event.detail.value) || 0
      
      if (isMultiModel.value && currentModel.value) {
        // 多模型：更新当前模型的参数
        if (type === 'initialState') {
          currentModel.value.initial_state[key] = value
        } else if (type === 'parameters') {
          currentModel.value.parameters[key] = value
        }
        
        // 同步到合并后的参数（为了兼容性）
        if (type === 'initialState') {
          localParams.value.initialState[key] = value
        } else if (type === 'parameters') {
          localParams.value.parameters[key] = value
        }
      } else {
        // 单模型：直接更新
        if (type === 'initialState') {
          localParams.value.initialState[key] = value
        } else if (type === 'parameters') {
          localParams.value.parameters[key] = value
        }
      }
      
      handleChange()
    }

    // 处理月蒸发量输入
    const handlePETInput = (event, index) => {
      const value = parseFloat(event.detail.value) || 0
      
      if (isMultiModel.value && currentModel.value) {
        // 多模型：更新当前模型的 monthlyPET
        if (currentModel.value.parameters.monthlyPET && currentModel.value.parameters.monthlyPET[index]) {
          currentModel.value.parameters.monthlyPET[index].pet = value
        }
        // 同步到合并参数
        if (localParams.value.parameters.monthlyPET && localParams.value.parameters.monthlyPET[index]) {
          localParams.value.parameters.monthlyPET[index].pet = value
        }
      } else {
        // 单模型：直接更新
        if (localParams.value.parameters.monthlyPET && localParams.value.parameters.monthlyPET[index]) {
          localParams.value.parameters.monthlyPET[index].pet = value
        }
      }
      
      handleChange()
    }

    const handleChange = () => {
      console.log('handleChange 被调用')
      // 标记有修改
      hasChanges.value = true
      console.log('hasChanges 设置为:', hasChanges.value)
      // 标记这是内部更新
      isInternalUpdate.value = true
      
      // 同步更新 _rawModels（如果存在）
      if (localParams.value._rawModels && localParams.value._rawModels.length > 0) {
        // 对于单模型，更新第一个模型的数据
        if (localParams.value._rawModels.length === 1) {
          localParams.value._rawModels[0].initial_state = { ...localParams.value.initialState }
          localParams.value._rawModels[0].parameters = { ...localParams.value.parameters }
        } else {
          // 对于多模型，需要根据模型名称分别更新（暂时简化处理，合并更新）
          localParams.value._rawModels.forEach(model => {
            // 更新各个模型的参数（简化处理：将修改应用到所有相关参数）
            Object.assign(model.initial_state, localParams.value.initialState)
            Object.assign(model.parameters, localParams.value.parameters)
          })
        }
      }
      
      // 实时更新本地状态
      emit('update:params', JSON.parse(JSON.stringify(localParams.value)))
    }
    
    // 保存参数（手动触发）
    const saveParams = () => {
      if (!hasChanges.value) return
      
      const changes = getChangedParams()
      emit('params-change', changes)
      
      // 重置修改标记
      hasChanges.value = false
      originalParams.value = JSON.parse(JSON.stringify(localParams.value))
      
      uni.showToast({
        title: '参数已保存',
        icon: 'success',
        duration: 1500
      })
    }
    
    // 获取修改的参数（增量）
    const getChangedParams = () => {
      if (!localParams.value || !originalParams.value) return {}
      
      const changes = {}
      
      // 检查初始状态的变化
      const initialChanges = {}
      for (const key in localParams.value.initialState) {
        if (localParams.value.initialState[key] !== originalParams.value.initialState[key]) {
          initialChanges[key] = localParams.value.initialState[key]
        }
      }
      if (Object.keys(initialChanges).length > 0) {
        changes.initial_state = initialChanges
      }
      
      // 检查模型参数的变化
      const paramChanges = {}
      for (const key in localParams.value.parameters) {
        if (key === 'monthlyPET') {
          // 特殊处理 monthlyPET
          const petChanged = JSON.stringify(localParams.value.parameters.monthlyPET) !== 
                            JSON.stringify(originalParams.value.parameters.monthlyPET)
          if (petChanged) {
            paramChanges.monthlyPET = localParams.value.parameters.monthlyPET
          }
        } else if (localParams.value.parameters[key] !== originalParams.value.parameters[key]) {
          paramChanges[key] = localParams.value.parameters[key]
        }
      }
      if (Object.keys(paramChanges).length > 0) {
        changes.parameters = paramChanges
      }
      
      return changes
    }

    const adjustAllPET = (factor) => {
      if (isMultiModel.value && currentModel.value) {
        // 多模型：调整当前模型的 monthlyPET
        if (!currentModel.value.parameters?.monthlyPET) return
        
        currentModel.value.parameters.monthlyPET.forEach(item => {
          item.pet = Math.round(item.pet * factor * 10) / 10
        })
        
        // 同步到合并参数
        if (localParams.value.parameters?.monthlyPET) {
          localParams.value.parameters.monthlyPET.forEach(item => {
            item.pet = Math.round(item.pet * factor * 10) / 10
          })
        }
      } else {
        // 单模型：直接调整
      if (!localParams.value?.parameters?.monthlyPET) return
      
      localParams.value.parameters.monthlyPET.forEach(item => {
        item.pet = Math.round(item.pet * factor * 10) / 10
      })
      }
      
      handleChange()
    }

    const resetPET = () => {
      if (defaultPET.value.length === 0) return
      
      if (isMultiModel.value && currentModel.value) {
        // 多模型：重置当前模型的 monthlyPET
        if (!currentModel.value.parameters?.monthlyPET) return
        
        currentModel.value.parameters.monthlyPET.forEach((item, index) => {
          item.pet = defaultPET.value[index]
        })
        
        // 同步到合并参数
        if (localParams.value.parameters?.monthlyPET) {
      localParams.value.parameters.monthlyPET.forEach((item, index) => {
        item.pet = defaultPET.value[index]
      })
        }
      } else {
        // 单模型：直接重置
        if (!localParams.value?.parameters?.monthlyPET) return
        
        localParams.value.parameters.monthlyPET.forEach((item, index) => {
          item.pet = defaultPET.value[index]
        })
      }
      
      handleChange()
    }

    watch(() => props.params, (newParams) => {
      // 如果是内部修改触发的更新，忽略
      if (isInternalUpdate.value) {
        console.log('内部更新，忽略 watch，保持 hasChanges =', hasChanges.value)
        isInternalUpdate.value = false
        return
      }
      
      // 外部更新（如重新加载参数）
      if (newParams) {
        console.log('外部更新，重新加载参数')
        localParams.value = JSON.parse(JSON.stringify(newParams))
        originalParams.value = JSON.parse(JSON.stringify(newParams))
        hasChanges.value = false
        console.log('参数重新加载，hasChanges 重置为 false')
        // 保存默认PET值
        if (newParams.parameters?.monthlyPET) {
          defaultPET.value = newParams.parameters.monthlyPET.map(item => item.pet)
        }
      }
    }, { immediate: true, deep: true })
    
    // 监听 hasChanges 变化（调试用）
    watch(hasChanges, (newVal) => {
      console.log('hasChanges 变化:', newVal)
    })

    return {
      localParams,
      activeTab,
      activeModelIndex,
      modelTypeLabel,
      modelParameters,
      tabs,
      hasChanges,
      // 多模型相关
      isMultiModel,
      modelList,
      modelChainFlow,
      currentModel,
      displayParams,
      switchModel,
      getModelTypeLabel,
      getModelIcon,
      // 参数处理
      getParamMeta,
      getParamFullDesc,
      getMonthName,
      handleParamInput,
      handlePETInput,
      handleChange,
      saveParams,
      adjustAllPET,
      resetPET
    }
  }
}
</script>

<style scoped>
.model-params-config {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.model-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  border-left: 3px solid #409eff;
  border-radius: 4px;
  flex: 1;
}

.indicator-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.indicator-value {
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
}

.save-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(17, 153, 142, 0.3);
}

.save-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.save-btn:active:not(.disabled) {
  transform: translateY(0);
}

.save-btn.disabled {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.save-icon {
  font-size: 16px;
}

.save-text {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* ========== 模型流向指示器样式 ========== */
.model-flow-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.model-flow-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.flow-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.model-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-width: 120px;
}

.model-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.model-badge.active {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 2px solid #409eff;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  transform: scale(1.05);
}

.model-icon {
  font-size: 32px;
  line-height: 1;
}

.model-name {
  font-size: 16px;
  font-weight: 700;
  color: #303133;
  letter-spacing: 0.5px;
}

.model-type-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

.flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
}

.arrow-line {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 0.7;
    transform: translateX(4px);
  }
}

.flow-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== 模型选择 Tab 样式 ========== */
.model-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
}

.model-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  background: #fff;
  border: 2px solid #e4e7ed;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.model-tab-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.model-tab-item:hover:not(.active) {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.model-tab-item.active {
  background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
  border-color: #409eff;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  transform: translateY(-2px);
}

.model-tab-item.active::before {
  height: 4px;
}

.model-tab-icon {
  font-size: 28px;
  transition: transform 0.3s;
}

.model-tab-item.active .model-tab-icon {
  transform: scale(1.1);
}

.model-tab-label {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  transition: color 0.3s;
}

.model-tab-item.active .model-tab-label {
  color: #fff;
}

.model-tab-sublabel {
  font-size: 12px;
  color: #909399;
  transition: color 0.3s;
}

.model-tab-item.active .model-tab-sublabel {
  color: rgba(255, 255, 255, 0.9);
}

/* ========== 参数分类 Tab 样式 ========== */
.params-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #e4e7ed;
}

.tab-item {
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab-item:hover {
  background-color: #f5f7fa;
}

.tab-item.active {
  border-bottom-color: #409eff;
}

.tab-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.tab-item.active .tab-label {
  color: #409eff;
  font-weight: 600;
}

.tab-count {
  font-size: 12px;
  color: #909399;
}

.params-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  max-width: 1200px;
}

.param-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s;
}

.param-item:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.param-header-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.param-key {
  font-size: 16px;
  color: #409eff;
  font-weight: 700;
  font-family: 'Monaco', 'Courier New', monospace;
  line-height: 1.5;
}

.param-full-desc {
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  word-break: break-word;
}

.param-label {
  font-size: 13px;
  color: #303133;
  font-weight: 600;
  line-height: 1.6;
  min-height: 20px;
}

.param-input {
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  font-family: 'Monaco', 'Courier New', monospace;
  min-height: 38px;
  line-height: 1.5;
  box-sizing: border-box;
}

.param-input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.param-unit {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  min-height: 18px;
}

.param-desc {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  min-height: 18px;
}

/* 月蒸发量表格 */
.pet-table {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
}

.pet-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
}

.pet-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid #e4e7ed;
}

.pet-row:last-child {
  border-bottom: none;
}

.pet-row:hover {
  background-color: #fafafa;
}

.pet-col {
  padding: 12px 16px;
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
}

.pet-col-month {
  border-right: 1px solid #e4e7ed;
}

.pet-col-value {
  padding: 8px 16px;
  display: flex;
  align-items: center;
}

.pet-input {
  width: 100%;
  max-width: 250px;
  height: 42px;
  padding: 10px 16px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  font-family: 'Monaco', 'Courier New', monospace;
  font-weight: 600;
  color: #409eff;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}

.pet-input:focus {
  outline: none;
  border-color: #409eff;
  background-color: #ecf5ff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.pet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: #909399;
  font-weight: 500;
}

.empty-hint {
  font-size: 13px;
  color: #c0c4cc;
}

.batch-operations {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.batch-label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

.batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-btn {
  padding: 6px 16px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.batch-btn:hover {
  border-color: #409eff;
  color: #409eff;
  background-color: #ecf5ff;
}

.params-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background-color: #f0f9ff;
  border-left: 3px solid #409eff;
  border-radius: 4px;
}

.note-icon {
  font-size: 16px;
  line-height: 1.5;
}

.note-text {
  flex: 1;
  font-size: 13px;
  color: #0c5caf;
  line-height: 1.6;
}
</style>

